<template>
  <div class="afterInvestDel-page">
    <pubChunk :mt="20" v-loading="pubChunkLoading" element-loading-text="数据计算中...">
      <span slot="title">历史走势图</span>
      <div slot="headLeft">
        <div class="flex wrap">
          <chart1Head
            ref="chart1Head"
            dateStyle="top: 520px;"
            :more_chart1_nav_list2="more_chart1_nav_list2"
            :chartDate.sync="chart_date"
            :chartDate_cb.sync="chartDate_cb"
            :oldDate="oldDate"
            :hasReal="Object.keys(realquery).length?true:false"
            @sameSection="sameSectionHandle"
            @sameSectionReal="sameSectionRealHandle"
          ></chart1Head>
          <el-button-group style="margin-left: 14px">
            <el-button
              size="small"
              :type="dateFreq == 1 ? 'primary' : ''"
              :disabled="defaultDateFreq > 1"
              @click="dateFreq = 1"
              >日频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 2 ? 'primary' : ''"
              :disabled="defaultDateFreq > 2"
              @click="dateFreq = 2"
              >周频
            </el-button>
            <el-button
              size="small"
              :type="dateFreq == 3 ? 'primary' : ''"
              @click="dateFreq = 3"
              >月频
            </el-button>
          </el-button-group>
          <!-- <el-checkbox
            style="margin-left: 14px"
            class="flex-v-center"
            v-model="showBeyondIncome"
            >显示超额曲线
          </el-checkbox> -->
          <el-button-group style="margin-left: 12px;">
            <el-button size="small" :type="showReal ? 'primary' : ''" @click="showRealHandle">实盘</el-button>
            <el-button size="small" :type="showBeyondIncome ? 'primary' : ''" @click="showBeyondIncomeHandle">超额</el-button>
          </el-button-group>
        </div>
      </div>
      <Chart1
        v-if="
          id &&
          dataFrom.length &&
          chart_date.length &&
          info.compositionName &&
          one_contrastOptions_list.length
        "
        @viewObj="viewObjHandle"
        @sectionChartDate="sectionChartDateHandle"
        @realContrastHnadle="$emit('realContrastHnadle')"
        id="detailsComn1"
        :userId="userId"
        :ids="id"
        :lineEcahrts_showAll="lineEcahrts_showAll"
        :id_index="dataFrom"
        :defaultDateFreq.sync="defaultDateFreq"
        :dateFreq.sync="dateFreq"
        :chart_date="chart_date"
        :sameSection="sameSection"
        :sameSectionReal="sameSectionReal"
        :warehouseAdjustmentCycle="warehouseAdjustmentCycle"
        :showReal="showReal"
        :showBeyondIncome="showBeyondIncome"
        :name1="info.compositionName"
        :name2="info.compositionName"
        :realquery="realquery"
        @clearRealquery="val=>$emit('clearRealquery', val)"
        @beyondIncome2Change="val=>$emit('beyondIncome2Change', val)"
        :pubChunkLoadingChange.sync="pubChunkLoading"
        :indexNames="one_contrastOptions_list"
        :typePage="navActive == 1 ? 'combManage' : 'combManage-strategy'"
        :height="280"
        width="100%"
      />
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from "@/components/investComn/pubChunk.vue";
import Chart1 from "@/components/Charts/strategyComb/groupManage/chart1.vue";
import chart1Head from "@/components/investComn/chart1Head2.vue";
import { riskIndexCalc } from "@/utils/pro";

export default {
  components: { pubChunk, Chart1, chart1Head },
  data() {
    return {
      params: {
        compositionId: ""
      },
      showBeyondIncome: false, // 超额收益
      showReal: true, // 显示实盘
      defaultDateFreq: undefined, // 频率
      dateFreq: undefined, // 频率
      list_riskIndicators: [], // 收益风险指标
      nominalAmount: "",
      list_riskIndicators_key1: 1,
      list_riskIndicators_key2: 0,
      sameSection: false,
      sameSectionReal: false,
      chart_date: [],
      chartDate_cb: [],
      lineEcahrts_showAll: false,

      pubChunkLoading: false,
    };
  },
  props: {
    id: {
      type: String | Number,
      default: ""
    },
    userId: {
      type: String | Number
    },
    navActive: {
      type: String | Number
    },
    realquery: {
      type: Object | Array
    },
    info: {
      type: Object | Array
    },
    oldDate: {
      type: Object | Array
    },
    more_chart1_nav_list2: {
      type: Object | Array
    },
    one_contrastOptions_list: {
      type: Object | Array,
      default: []
    },
    endTime: {
      type: String | Number
    },
    startTime: {
      type: String | Number
    },
    chart1List: {
      type: Object | Array
    },
    dataFrom: {
      type: Object | Array
    },
    warehouseAdjustmentCycle: {
      type: String | Number,
      default: 1
    }
  },
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.params.compositionId = newVal;
      },
      deep: true
    },
    startTime: {
      handler(newVal, oldVal) {
        this.chart_date.splice(0, 1, newVal);
      },
      deep: true
    },
    endTime: {
      handler(newVal, oldVal) {
        this.chart_date.splice(1, 1, newVal);
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    showRealHandle() {
      this.showBeyondIncome = false
      this.showReal = true
    },
    showBeyondIncomeHandle() {
      this.showBeyondIncome = true
      this.showReal = false
    },
    viewObjHandle(data) {
      this.$emit("update:chart1List", riskIndexCalc(data));
    },
    sectionChartDateHandle(chart_date) {
      this.chartDate_cb = chart_date
    },
    sameSectionHandle(val) {
      this.sameSection = val;
    },
    sameSectionRealHandle(val) {
      this.sameSectionReal = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.afterInvestDel-page {
  padding: 0;
}
</style>
